導(dǎo)讀:這篇文章是之后WEB端系列設(shè)計(jì)規(guī)范的前言部分,目的是起到拋磚引玉的作用,簡述如何制作屬于“自己”的Web端設(shè)計(jì)規(guī)范。Web端設(shè)計(jì)規(guī)范的價值1.可復(fù)用性有了完整的設(shè)計(jì)規(guī)范和對應(yīng)
發(fā)表日期:2019-12-03
文章編輯:興田科技
瀏覽次數(shù):8858
標(biāo)簽:
這篇文章是之后WEB端系列設(shè)計(jì)規(guī)范的前言部分,目的是起到拋磚引玉的作用,簡述如何制作屬于“自己”的Web端設(shè)計(jì)規(guī)范。
Web端設(shè)計(jì)規(guī)范的價值
1.可復(fù)用性
有了完整的設(shè)計(jì)規(guī)范和對應(yīng)的組件控件。方便視覺和交互設(shè)計(jì)師反復(fù)復(fù)用,不需要重復(fù)制作,減少工作量提高工作效率。
2.統(tǒng)一性
有了統(tǒng)一的設(shè)計(jì)規(guī)范,設(shè)計(jì)師之間使用時,可避免自我創(chuàng)造組件控件,保持團(tuán)隊(duì)產(chǎn)品的統(tǒng)一性體驗(yàn)。
3.提升能力
由于組件控件的可復(fù)用,這直接使設(shè)計(jì)師的工作效率得到極大提高節(jié)省了大量時間,可以有大量時間思考設(shè)計(jì)和業(yè)務(wù)背后的邏輯從而提高設(shè)計(jì)思維能力。同時完整的設(shè)計(jì)規(guī)范是系統(tǒng)的,設(shè)計(jì)師閱讀之后可以構(gòu)建自我的設(shè)計(jì)體系,對于設(shè)計(jì)的提高有極大的好處。
4.團(tuán)隊(duì)文化沉淀
團(tuán)隊(duì)有了設(shè)計(jì)規(guī)范之后,便于團(tuán)隊(duì)以后做設(shè)計(jì)的依據(jù)和參考,不論是新員工的到來還是老員工的離去,都可以很好的對接工作提升團(tuán)隊(duì)的協(xié)同效率。
Web端設(shè)計(jì)規(guī)范包含哪些
目前網(wǎng)上大部分設(shè)計(jì)規(guī)范都是之針對組件控件的規(guī)范,缺少完整的設(shè)計(jì)思想和體系化的內(nèi)容。
在制定設(shè)計(jì)規(guī)范過程中會形成設(shè)計(jì)理念、設(shè)計(jì)原則、組件控件、界面交互和輸出文檔等。設(shè)計(jì)者可以依據(jù)自我的設(shè)計(jì)理念和原則按照功能需求直接調(diào)用規(guī)范中的標(biāo)準(zhǔn)控件,按照信息結(jié)構(gòu)調(diào)用元素尺寸進(jìn)行設(shè)計(jì),很輕易便能輸出中高保真原型圖,減輕了設(shè)計(jì)過程中對交互控件選擇和信息排版思考的負(fù)擔(dān)。
Web端設(shè)計(jì)規(guī)范之設(shè)計(jì)理念篇不同的使用對象(B端、C端),不同的終端設(shè)備,設(shè)計(jì)的區(qū)別是完全不一樣的。所以設(shè)計(jì)理念也有所區(qū)別。
B端產(chǎn)品一般較定制化,以業(yè)務(wù)為導(dǎo)向??赡苡泻芏喔呒壒δ?,突出高效易用,導(dǎo)致易學(xué)性打折扣。
C端產(chǎn)品一般考慮絕大部分用戶使用場景和訴求,高級功能會相對少點(diǎn)。突出易學(xué)性。
所以在制定設(shè)計(jì)理念時,可根據(jù)團(tuán)隊(duì)實(shí)際情況來設(shè)計(jì)制定。
Web端設(shè)計(jì)規(guī)范之設(shè)計(jì)原則篇
設(shè)計(jì)原則目前已經(jīng)有很多,例如尼爾森的十大可用性原則、格式塔原則、剃刀法則、費(fèi)茨定律、以及設(shè)計(jì)中常見的對比、對齊等,那么對于這么多原則如何變成一套自己的設(shè)計(jì)規(guī)范的設(shè)計(jì)原則篇呢?這個需要設(shè)計(jì)師們根據(jù)自身情況或者自身團(tuán)隊(duì)實(shí)際情況去把控梳理。
Web端設(shè)計(jì)規(guī)范之組件控件篇
組件控件是整個設(shè)計(jì)規(guī)范的重要的內(nèi)容之一,組件控件分類可以根據(jù)組件控件屬性進(jìn)行分類,也可以根據(jù)組件控件的功能進(jìn)行劃分。
按照設(shè)計(jì)師做設(shè)計(jì)的使用場景,還是按照組件控件的功能性進(jìn)行劃分比較切合。
依據(jù)于功能劃分,例如表單類就可以劃分為:單文本輸入,多文本輸入、日歷時間選擇器、下拉選擇列表、單選多選等等
Web端設(shè)計(jì)規(guī)范之界面交互篇
移動端的觸發(fā)手勢有單擊、長按、左右滑動、拖拽、旋轉(zhuǎn)、夾捏等。相對于移動端,Web端的界面交互就很簡單了,基本就是懸浮和點(diǎn)擊。
界面交互的本質(zhì)用一個公式可表述即:觸發(fā)對象+操作行為+交互結(jié)果=界面交互
Web端設(shè)計(jì)規(guī)范之團(tuán)隊(duì)輸出物篇
作為一名交互設(shè)計(jì)師,我們的重點(diǎn)工作職責(zé)是起到承上啟下的作用。
比如對接上游的產(chǎn)品經(jīng)理和項(xiàng)目經(jīng)理,跟他們討論過產(chǎn)品規(guī)劃及需求后,他們會根據(jù)交互設(shè)計(jì)師輸出的交互文檔來評審設(shè)計(jì)方案是否滿足用戶需求,以及在開發(fā)實(shí)施過程中的可行性;
其次要對接下游的視覺設(shè)計(jì)師和開發(fā)工程師,他們會根據(jù)交互文檔中的線框圖、交互細(xì)節(jié)說明等來輸出視覺設(shè)計(jì)稿、用代碼實(shí)現(xiàn)交互設(shè)計(jì)方案,并以此為依據(jù)完成落地實(shí)現(xiàn)等工作。所以交互設(shè)計(jì)師重要的輸出物就是交互文檔,它是對接上下游的重要紐帶。
的交互文檔應(yīng)該包含以下7點(diǎn)內(nèi)容:完整的項(xiàng)目簡介、需求分析、新增修改紀(jì)錄、信息架構(gòu)、交互設(shè)計(jì)的方案闡述、頁面交互流程圖(包含界面布局,操作手勢,反饋效果,元素的規(guī)則定義)、異常頁面和異常情況的說明。
作為視覺設(shè)計(jì)師而言,輸出物的是視覺稿、標(biāo)注和切圖,這里不做贅述。
上一篇:
暫無信息更多新聞
2020
關(guān)于seo關(guān)鍵詞,出現(xiàn)較多的是一些主要產(chǎn)品的名稱或名稱不同的產(chǎn)品,如果將一些關(guān)鍵字作為企業(yè)網(wǎng)站的目標(biāo)關(guān)鍵字實(shí)施,那是絕對不行的,非常費(fèi)時費(fèi)力,因此必須做
View details
2020
關(guān)于網(wǎng)站優(yōu)化,SEO需要哪些技術(shù)知識呢,很多新手都明白,SEO技術(shù)需要哪些知識技能,其實(shí)SEO的工作職責(zé)就是讓網(wǎng)站擁有更多的關(guān)鍵詞排名,從而獲得更高的流量。很
View details
2020
關(guān)于seo優(yōu)化,網(wǎng)站需要大量的seo基礎(chǔ)優(yōu)化設(shè)置,關(guān)鍵字布局就是要優(yōu)化設(shè)置的,利用seo中關(guān)鍵字的布局原則,把合適的關(guān)鍵字布局到網(wǎng)頁上,這個網(wǎng)頁的問題不大。下
View details
2023
網(wǎng)站內(nèi)容對于吸引潛在客戶和提升搜索引擎排名至關(guān)重要。結(jié)合搜索引擎優(yōu)化(SEO)策略,使用相關(guān)的關(guān)鍵詞和有價值的內(nèi)容,可以使網(wǎng)站在搜索引擎結(jié)果中獲得更好的排名。
View details